$(function () {
    var check = true;
    var changeTime = 200;
    //防止连续点击
    var clickCheck = 0;
    //页面效果JS
    //小标题鼠标悬停变背景色
    $(".menu").mouseover(function () {
        $(this).css("background", "rgba(218, 216, 230, 0.5)");
        $(this).css({
            color: "white"
        });
    });
    $(".menu").mouseout(function () {
        //如果离开的是被点击标题则不恢复样式
        if ($(this).attr("value") == 1) {
            return;
        }
        $(this).css("background", "");
        $(this).css({
            color: "rgb(162, 194, 194)"
        });
    });
    //大标题鼠标悬停变背景色
    $(".menu_main").mouseover(function () {
        $(this).css({
            background: "url(../images/high_Light_Background.png)"
        });
        $(this).css({
            color: "white"
        });
    })
    $(".menu_main").mouseout(function () {
        if ($(this).attr("value") == 1) {
            return;
        }
        $(this).css("background", "");
        $(this).css({
            color: "rgb(139, 153, 153)"
        });
    })
    //小菜单点击之后样式固定
    $(".menu").click(function () {
        var obj = $(this);
        $.each($(".menu"), function () { //点击后首先把所有标题样式还原
            $(this).attr("value", null);     //取消所有标题被点击标志
            $(this).css("background", "");
            $(this).css({color: "rgb(162, 194, 194)"});
        });
        //当前点击标题样式变化
        $(this).css("background", "rgba(218, 216, 230, 0.5)");
        $(this).css({color: "white"});
        //给当前点击标题添加被点击标志
        obj.attr("value", "1");
    })
    //大菜单点击之后样式固定
    $(".menu_main").click(function () {
        var obj = $(this);
        $.each($(".menu_main"), function () { //点击后首先把所有标题样式还原
            $(this).attr("value", null);     //取消所有标题被点击标志
            $(this).css("background", "");
            $(this).css({color: "rgb(139, 153, 153)"});
        });
        //当前点击标题样式变化
        $(this).css({
            background: "url(../images/high_Light_Background.png)"
        });
        $(this).css({
            color: "white"
        });
        //给当前点击标题添加被点击标志
        obj.attr("value", "1");
    })
    $(".menu_main:eq(4)").click();   ///触发点击事件
    $(".menu:eq(2)").click();////触发点击事件
    //**********************************************************************/
    //********************************角色选择动画***************************/
    //给默认的三张显示图片确定位置
    $("#picture1").attr("state", "left");
    $("#picture2").attr("state", "mid");
    $("#picture3").attr("state", "right");
    //将所有不显示的图片隐藏
    hidePicture();

    //下一张（向右移动）  //给下一张按钮绑定点击事件
    $("#next").click(function () {
        if (clickCheck == 1) {
            return;
        }
        clickCheck = 1;
        // alert("2222")
        //状态为left的图片的上一张的状态改为left_prev同时调整其位置到最左边
        var left = $("div[state='left']").attr("id");
        var num_left = left.substring(7);
        var prev = 0;
        if (num_left - 1 == 0) {
            prev = 12;
        } else {
            prev = num_left - 1;
        }
        //选定prev   给它state改为left_prev
        var prevPicture = $("#picture" + prev);
        var leftPicture = $("#" + left);
        $("#picture" + prev).attr("state", "left_prev");
        // alert($("#picture"+prev).attr("state"))
        //改变其left属性  变换其初始位置   
        prevPicture.css("left", "-280px")
        /*************************************预备图片移向左边*************************/
        prevPicture.animate({"left": "0"}, changeTime, "linear", function () {
            prevPicture.attr("state", "left")
        })
        /****************************************************************************/
        /*************************************左边图片移向中间*************************/
        leftPicture.animate({"left": "280px"}, changeTime, "linear", function () {
            console.log("成功");
            leftPicture.attr("state", "mid");
        })
        $("#" + left + " img").animate({"width": "315px"}, changeTime, "linear", function () {
        })
        /*****************************************************************************/
        /***********************************中间图片移向右边****************************/
        $("div[state='mid']").animate({"left": "598px"}, changeTime, "linear", function () {
            $(this).attr("state", "right");
        })
        $("div[state='mid'] img").animate({"width": "280px"}, changeTime, "linear", function () {
        })
        /*****************************************************************************/
        /***********************************右边图片移出*******************************/
        $("div[state='right']").animate({"left": "880px"}, changeTime, "linear", function () {
            $(this).attr("state", "");
        })
        showPicture();
        hidePicture();

        setTimeout(function () {
            setDivDefault();
            clickCheck = 0;
            role_text();
        }, changeTime + 50);
    })
    //上一张（向左移动）   给上一张按钮绑定事件
    $("#last").click(function () {
        if (clickCheck == 1) {
            return;
        }
        clickCheck = 1;
        // alert("222");
        //状态为right的图片的下一张的状态改为right_prev同时调整其位置到最左边
        var right = $("div[state='right']").attr("id");
        var num_right = parseInt(right.substring(7));
        var next = 0;
        if (num_right + 1 > 12) {
            next = 1;
        } else {
            next = num_right + 1;
        }
        var nextPicture = $("#picture" + next);
        var rightPicture = $("#" + right);
        $("#picture" + next).attr("state", "left_prev");
        nextPicture.css("left", "880px")
        /************下一张移向右边**********************************************************************/
        nextPicture.animate({"left": "598px"}, changeTime, "linear", function () {
            nextPicture.attr("state", "right");
        })
        $("div[state='right']").animate({"left": "280px"}, changeTime, "linear", function () {
            $(this).attr("state", "mid");
        })
        $("div[state='right'] img").animate({"width": "315px"}, changeTime, "linear", function () {
        })
        $("div[state='mid']").animate({"left": "0"}, changeTime, "linear", function () {
            $(this).attr("state", "left");
        })
        $("div[state='mid'] img").animate({"width": "280px"}, changeTime, "linear", function () {
        })
        $("div[state='left']").animate({"left": "-280px"}, changeTime, "linear", function () {
            $(this).attr("state", "")
        })
        setTimeout(function () {
            clickCheck = 0;
            setDivDefault();
            role_text();
        }, changeTime + 50);   //加50为了防止图片还未变化完   图片属性还未改变就执行role_text方法  导致描述有误
        showPicture();
        hidePicture();

    })

    //显示图片的方法
    function showPicture() {
        $("#picture_area>div").each(function () {
            console.log($(this).attr("state"))
            if ($(this).attr("state") != null) {
                $(this).show();
            }
        })
    }

    //隐藏图片的方法
    function hidePicture() {
        $("#picture_area>div").each(function () {
            console.log($(this).attr("state"))
            if ($(this).attr("state") == null) {
                $(this).hide();
            }
        })
    }

    //男女切换动画
    var zIndex = 1;
    var gender = "female";
    $(".genderSelect").click(function () {
        var val = $(this).val();
        console.log(val)
        console.log("被选中的是" + gender + "性")
        if ($(this).val() == "male") {
            //给男女解释栏添加解释
            if (gender == "male") {
                return;
            }
            gender = "male";
            $(".img_female").animate({"width": "0"}, changeTime, "linear", function () {
                setDivDefault();
                $(".img_male").css("z-index", zIndex);
                $(".img_female").css("width", "100%");
            })
        } else {
            if (gender == "female") {
                return;
            }
            gender = "female";
            $(".img_male").animate({"width": "0"}, changeTime, "linear", function () {
                setDivDefault();
                $(".img_female").css("z-index", zIndex);
                $(".img_male").css("width", "100%");
            })
        }
        role_text();
        zIndex++;
    })

    function setDivDefault() {
        $("#picture_area div").each(function () {
            var state = $(this).attr("state");
            if (state != "mid") {
                $(this).css({"width": "280px"})
            } else {
                $(this).css({"width": "315px"})
            }
        })
    }

    //箭头切换图片
    $("#last").mouseover(function () {
        $(this).attr("src", "../images/arrow_light.png");
    })
    $("#last").mouseout(function () {
        $(this).attr("src", "../images/arrow_dark.png");
    })
    $("#next").mouseover(function () {
        $(this).attr("src", "../images/arrow_light_right.png");
    })
    $("#next").mouseout(function () {
        $(this).attr("src", "../images/arrow_dark_right.png");
    })
    /******************************************************************样式完毕 */
        //加载完成先填充角色信息 
    var gender1 = "女";
    var role = "萨满";
    role_text();

    function role_text() {
        role = $("#picture_area>div[state='mid']").attr("role");
        var mark = $(".genderSelect:checked").val();
        gender1 = mark == "male" ? "男" : "女";
        var text = role + "-" + gender1;
        $("#desc_role").text(text);
    }

    //添加按钮点击之后添加页面隐藏 具体信息填写页面显示
    $("#add").click(function () {
        $("#server_area").html("<option value='0'>请选择</option>");
        var option = "<option value='-1'>请选择</option>";
        // $("#province").html(option)            
        // $("#city").html(option);
        // $("#county").html(option);
        // alert(role+"-"+gender1);
        var imageText = role + "-" + gender1;
        $("#role_select").hide();
        $("#role_info").show();
        $("#role_selected").attr("src", "../images/career_images/" + imageText + ".png")
        $("#career").val(role);
        $("#sex").val(gender1);


        //填充大区选择下拉框
        $.ajax({
            type: "GET",
            url: "/blog/public/getServerAreas",
            dataType: "JSON",
            success: function (response) {
                var data = response.data;
                var option = "<option value='0'>请选择</option>";
                for (var i = 0; i < data.length; i++) {
                    option += "<option value='" + data[i].server_Area_Id + "'>" + data[i].server_Area_Description + "</option>"
                }
                $("#server_area").html(option);
            }
        });
        //填充省级下拉框  //暂时用不着
        // $.ajax({
        //     type: "GET",
        //     url: "/blog/public/getDistrict",
        //     data: {
        //         "parentId":1
        //     },
        //     dataType: "JSON",
        //     success: function (response) {
        //         var data = response.data;
        //         var option = "<option value='-1'>请选择</option>";   
        //         for (var i = 0; i < data.length; i++) {
        //             option += "<option value='" + data[i].id + "'>" + data[i].districtName + "</option>"
        //         }                  
        //         $("#province").html(option);
        //     }
        // });
    })
    //大区选择之后  查询服务器名称并填充服务器下拉框
    $("#server_area").on("change", function () {
        var option = "<option value='0'>请选择</option>";
        $("#server_server").html(option);
        var value = $(this).val();
        if (value == 0) {
            return false;
        }
        $.ajax({
            type: "GET",
            url: "/blog/public/getServers",
            data: {
                "areaId": value
            },
            dataType: "JSON",
            success: function (response) {
                var data = response.data;
                for (var i = 0; i < data.length; i++) {
                    option += "<option value='" + data[i].server_Server_Id + "-" + data[i].server_Server_Description + "'>" + data[i].server_Server_Name + "</option>"
                }
                $("#server_server").html(option);
            }
        });

    })
    $("#province").on("change", function () {
        var option = "<option value='-1'>请选择</option>";
        $("#city").html(option);
        $("#county").html(option);
        var value = $(this).val();
        if (value == -1) {
            return false;
        }
        $.ajax({
            type: "GET",
            url: "/blog/public/getDistrict",
            data: {
                "parentId": value
            },
            dataType: "JSON",
            success: function (response) {
                var data = response.data;
                var option = "<option value='0'>请选择</option>";
                for (var i = 0; i < data.length; i++) {
                    option += "<option value='" + data[i].id + "'>" + data[i].districtName + "</option>"
                }
                $("#city").html(option);
            }
        });
    })
    $("#city").on("change", function () {
        var option = "<option value='-1'>请选择</option>";
        $("#county").html(option);
        var value = $(this).val();
        if (value == -1) {
            return false;
        }
        $.ajax({
            type: "GET",
            url: "/blog/public/getDistrict",
            data: {
                "parentId": value
            },
            dataType: "JSON",
            success: function (response) {
                var data = response.data;
                var option = "<option value='0'>请选择</option>";
                for (var i = 0; i < data.length; i++) {
                    option += "<option value='" + data[i].id + "'>" + data[i].districtName + "</option>"
                }
                $("#county").html(option);
            }
        });
    })
    $("#return").click(function () {
        $("#role_select").show();
        $("#role_info").hide();
    })
    $("#submit").click(function () {
        var check = Check();
        if (check == 99) {
            return false;
        }
        var param = {
            roleName: $("#role_name").val(),
            career: $("#career").val(),
            camp: $("#camp").val(),
            sex: $("#sex").val(),
            roleBirthday: $("#GameRoleBirthDay").val(),
            level: $("#level").val(),
            guild: $("#guild").val(),
            levelInGuild: $("#level_in_guild").val(),
            rem: $("#rem").val(),
            serverArea: $("#server_area").val(),
            serverName: $("#server_server").val()
        }
        var reg = new RegExp("-", "g");
        var date = param["roleBirthday"].replace(reg, "");
        $.ajax({
            type: "POST",
            url: "/blog/role/addrole",
            data: param,
            dataType: "JSON",
            success: function (response) {
                debugger
            }
        });

    });
})
